<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <link type="text/css" rel="stylesheet"
          href="../bootstrap-4.4.1-dist/css/bootstrap.css">
</head>
<style>
    .dis{
    /*    超链接禁止选中样式灰色*/
        color: #999;
        pointer-events: none;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <!-- 顶部搜索框模块 -->
        <div class="form-group">
            <div class="input-group">
                <h4>{{msg}}</h4>
            </div>
        </div>

        <!-- 数据表格 -->
        <table class="table table-bordered table-hover mt-2">
            <thead>
            <tr>
                <th>商品图片</th>
                <th>商品名称</th>
                <th>商品类别</th>
                <th>商品品牌</th>
                <th>商品售价</th>
                <th>商品采购价</th>
                <th>商品描述</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in lists" :key="index">
                <td><img width="50px" height="50px" :src="http+'/'+item.imageUrl"></td>
                <td>{{item.productName}}</td>
                <td>{{item.categoryName}}</td>
                <td>{{item.brand}}</td>
                <td>{{item.price}}</td>
                <td>{{item.purchasePrice}}</td>
                <td>{{item.description}}</td>
                <td>
                    <button class="btn btn-primary" @click="edit(item)">编辑</button>
                    <button class="btn btn-danger">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div v-if="isS" class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <form @submit.prevent="updateProduct" class="border p-4 rounded bg-light shadow-sm">
                    <h2 class="text-center mb-4">修改商品信息</h2>
                    <div class="form-group">
                        <label for="productId">商品Id:</label>
                        <span id="productId" class="form-control-plaintext">{{ productUp.productId }}</span>
                    </div>
                    <div class="form-group">
                        <label for="productName">商品名称</label>
                        <input type="text" class="form-control" id="productName" v-model="productUp.productName"
                               placeholder="请输入商品名称">
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">修改</button>
                </form>
            </div>
        </div>
    </div>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item" >
                            <a  class="page-link" href="#" @click="pageUp()" :class="{dis:page.isFirstPage}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        <li class="page-item" v-for=" (i,index) in page.pages" :key="i">
                            <a class="page-link" href="#" @click="pageTo(i)">{{i}}</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#" @click="pageDown()" :class="{dis:page.isLastPage}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>

                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    const instance = axios.create({
        baseURL: 'http://localhost:8080/',
        timeout: 3000,
    });
    new Vue({
        el: '#app',
        data: {
            msg: '商品列表',
            lists: [],
            http: 'http://localhost:8080',
            pageNum: 1,
            isS: false,
            productUp: [],
            page:[]
        },
        methods: {
            // 获取商品数据
            arrList() {
                instance.get('products', {
                    params: {
                        pageNum: this.pageNum
                    }
                }).then((response) => {
                    this.lists = response.data.data.list
                    this.page = response.data.data
                    console.log(this.page)
                }).catch(function (error) {
                    console.log(error);
                }).finally(function () {
                    // 总是会执行
                });
            },
            // 编辑
            edit(item) {
                console.log(item.productId)
                this.isS = true
                this.productUp = item
            },
            // from 表单提交
            updateProduct() {
                console.log(this.productUp.productName)
                // axios.post(this.http + '/products/update', {
                //         productId: this.productUp.productId,
                //         productName: this.productUp.productName
                //     }, {
                //         headers: {
                //             'Content-Type':
                //                 'multipart/form-data'
                //         }
                //     }
                // ).then((response) => {
                //     console.log(response);
                //     if (response.data.code === 200) {
                //         this.isS = false
                //         alert("修改成功")
                //         this.arrList()
                //     } else {
                //         alert('修改失败')
                //     }
                // }).catch(function (error) {
                //     console.log(error);
                // });
            },
            // 上一页
            pageUp() {
                this.pageNum--
                this.arrList()
            },
            // 下一页
            pageDown() {
                this.pageNum++
                this.arrList()
            },
            // 跳转页面
            pageTo(item) {
                this.pageNum = item
                this.arrList()
            }
        },
        // vue 实例化初始化后调用
        created() {
            this.arrList()
        }
    })

</script>